<template>
  <div style="background-color: #F7F8FA;">
    <Header :types=1 :color="'#F7F8FA'" />
    <div class="bangdantitle">
      <div v-for="(item, index) in yinyuankang.game_types" :key="index" style="" class="bangdanitem"
        @click="gobangdantile(item.id, index)">
        <div :class="{ active: bangdantitle == index }">{{ item.name }}</div>
        <div v-if="bangdantitle == index" class="hengxian"></div>
      </div>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell    v-for="(item, index) in yinyuankang.allGames?.games" :key="index"
        style="margin:0;padding:0;background:none !important;" @click="gogame(item)">
        <div class="bangdanitems">
          <div style="display: flex;align-items: center;">
            <img v-if="item.iconss !== ''" :src="item.iconss" alt="" style="width:2rem;height: 2rem;">
            <div v-if="item.iconss === ''"
              style="width:2rem;height: 2rem;color: #AEB0B3;font-size: .75rem;line-height: 2rem;text-align: center;font-family:modeng ;">
              {{ index + 1 }}</div>
            <img :src="item.icon" alt="" style="width:3.75rem;height: 3.75rem;border-radius: .75rem;margin-left:.5rem;">
          </div>
          <div :style="getBackgroundColor(index)" class="bangdanitemtitle">
            <div>
              <div style="font-weight: bold;font-size: .875rem;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; width:6.25rem;height: 20px;">{{ item.name }}</div>
              <div style="display: flex;align-items: center;height: 20px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; width:9rem;height: 20px;" :style="{ color: getColor(index) }">
                <div v-for="(items, indexs) in item.biaoqian" :key="indexs" style="margin-right:.2rem;">
                  {{ items }}
                </div>
              </div>
              <div style="display: flex;align-items: center;height: 20px;">
                <img :src="getStarImage(index)" alt="" style="width:1rem;height:1rem;margin-right:.2rem;">
                <div style="font-weight: 500;font-size: .75rem;">{{ item.point }}</div>
              </div>
            </div>
            <div :style="getXiangqingStyle(index)" class="xiangqing" v-if="bangdantitle!=1">详情</div>
            <div :style="getXiangqingStyle(index)" class="xiangqing"  v-if="bangdantitle ==1 && item.is_yuyue==true">已预约</div>
            <div :style="getXiangqingStyle(index)" class="xiangqing"  v-if="bangdantitle ==1 && item.is_yuyue==false">预约</div>
          </div>
        </div>
      </van-cell>
    </van-list>
    <BottomTab :types=0 />
  </div>
</template>

<script>
import Header from '~/components/header.vue';
import icon1 from '~/static/index/index1.png';
import icon2 from '~/static/index/index2.png';
import icon3 from '~/static/index/index3.png';
import icon4 from '~/static/index/xingxing.png';
import icon5 from '~/static/index/xingxing2.png';
import BottomTab from '~/components/footer.vue';
import md5 from 'js-md5';
import { sign } from 'core-js/core/number';
export default {
  components: {
    Header,
    BottomTab
  },
  data() {
    return {
      bangdantitle: 0,
      loading: false,
      finished: false,
      page: 1,
      yinyuankang: '',
      xainqing: '预约',
      t: '',
      textToHash: '',
      uid: '',
      gamesid:0
    }
  },
  head() {
    return {
      title: this.yinyuankang?.seos.title, // 动态标题
      meta: [
        { hid: 'description', name: 'description', content: this.yinyuankang?.seos.description }, // 描述
        { hid: 'keywords', name: 'keywords', content: this.yinyuankang?.seos.keywords } // 关键词
      ]
    }
  },
  async asyncData({ $axios,route }) {
    let id = 0;
    if (route.query.id==3) {
      id = route.query.id;
    }
    try {
      const params = {
        ct: 'app2023',
        type: '5',
        games_type: id,
        p:1,

      };
      const response = await $axios.get('api/app/v3', { params });
      const indexicon = [icon1, icon2, icon3];
      if (response.data.data.allGames.games && Array.isArray(response.data.data.allGames.games)) {
        response.data.data.allGames.games.forEach((item, index) => {
          item.iconss = indexicon[index] || '';
        });
      }
      return { yinyuankang: response.data.data };
    } catch (error) {
      console.error('Failed to fetch data:', error);
      return { data: null };
    }
  },
  async mounted() {
    this.uid = this.getCookie('loginnew');
    this.t = Date.now();
   const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    if(this.$route.query.id==3){
      this.bangdantitle=2;
       this.gamesid=3
    }
    // Check if the device is an Apple device
    const isAppleDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (isAppleDevice) {
      try {
        const params = {
          ct: 'app2023',
          type: '5',
          games_type:this.gamesid,
          p:1,
        };
        const response = await this.$axios.get('api/app/v3', { params });
        const indexicon = [icon1, icon2, icon3];
        if (response.data.data.allGames.games && Array.isArray(response.data.data.allGames.games)) {
          response.data.data.allGames.games.forEach((item, index) => {
            item.iconss = indexicon[index] || '';
          });
        }
        this.yinyuankang = response.data.data;
      } catch (error) {
        console.error('Failed to fetch data in mounted:', error);
        this.yinyuankang = null; // Ensure the key matches the one used in asyncData
      }
    }
  },

  methods: {
    gogame(e) {
      if(this.bangdantitle==1){
        if(this.uid==''){
        window.location.href = `${this.$domain}/?ct=wap&ac=login&goto=https:m.77.top/allgameph.html`;
      }
      }

      if (this.bangdantitle != 1) {
        this.$router.push({
        path: `/shouyou/${e.id}.html`,
      });
      } else if( this.bangdantitle == 1 ) {
          if(e.is_yuyue==false){
            this.goyuyue(e)
          }
         
      }

    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
    goyuyue(e){
      console.log(e,'哈哈哈哈哈')
          const params = {
        ct: 'app',
        ac: 'yuyue_add',
        gid: e.id,
        t: this.t,
        uid: this.uid,
        sign: this.textToHash
      };
this.$axios.get('api/app/v3', { params }).then(response => {
  this.fildlist(4);
})
    },
    getBackgroundColor(index) {
      switch (index) {
        case 0:
          return { backgroundColor: '#CC5266FF', color: '#FFFFFF' };
        case 1:
          return { backgroundColor: '#E5822EFF', color: '#FFFFFF' };
        case 2:
          return { backgroundColor: '#6BB2B2', color: '#FFFFFF' };
        default:
          return { backgroundColor: '#F2F3F5', color: '#2E3033;' };
      }
    },
    getStarImage(index) {
      return index < 3 ? icon4 : icon5;
    },
    onLoad() {
      setTimeout(() => {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
          this.bangdanlist()
        } 
      },1000);
    },
    async bangdanlist() {
      const params = {
        ct: 'app2023',
        type: '5',
        games_type: this.gamesid,
        p: this.page
      };
      const response = await this.$axios.get('api/app/v3', { params });
      const indexicon = [];
      if (response.data.data.allGames.games && Array.isArray(response.data.data.allGames.games)) {
        response.data.data.allGames.games.forEach((item, index) => {
          item.iconss = indexicon[index] || '';
        });
      }
      if(this.page <= this.yinyuankang.max_p){
        this.page++;
         this.bangdanlist()
      }
      // this.yinyuankang.allGames.games = this.yinyuankang.allGames.games.concat(response.data.data.allGames.games);
      if (this.page == 1) {
        this.yinyuankang = response.data.data;
        this.loading=false;
      } else {
        this.yinyuankang.allGames.games = this.yinyuankang.allGames.games.concat(response.data.data.allGames.games);
      }
    },
    getColor(index) {
      // 前三项使用 rgba(255,255,255,0.92) 颜色
      if (index < 3) {
        return 'rgba(255,255,255,0.92)';
      }
      // 其余项使用 #AEB0B3 颜色
      return '#AEB0B3';
    },
    gobangdantile(id, index) {
      this.bangdantitle = index;
            if (this.bangdantitle == 0) {
              window.location.href = '/allgameph.html';
            }else{
              this.gamesid=id
      this.fildlist(id);
            }
      // if (this.bangdantitle == 1) {

      //   this.xainqing = '预约'
      // } else {

      //   this.xainqing = '下载'
      // }
     

    },
    async fildlist(e) {
      this.gamesid=e
      this.page = 1;
      const params = {
        ct: 'app2023',
        type: '5',
        games_type: e,
        id: e.id,
        t: this.t,
        uid: this.uid,
        sign: this.textToHash
      };
      const response = await this.$axios.get('api/app/v3', { params });
      const indexicon = [icon1, icon2, icon3];
      if (response.data.data.allGames.games && Array.isArray(response.data.data.allGames.games)) {
        response.data.data.allGames.games.forEach((item, index) => {
          item.iconss = indexicon[index] || '';
        });
      }
      this.yinyuankang = response.data.data
      this.loading=false;
        this.finished=true;
    },
    getXiangqingStyle(index) {
      if (index < 3) {
        return {
          border: '.0625rem solid #FFFFFF',
          color: '#FFFFFF'
        };
      }
      return {
        border: '.0625rem solid #2E3033',
        color: '#2E3033'
      };
    }

  }
}
</script>

<style scoped>
.bangdantitle {
  display: flex;
  align-items: center;
  margin: 0 .95rem;

}

.hengxian {
  width: 3.5rem;
  height: .125rem;
  background: #2E3033;
  border-radius: 1.5625rem;
}

.bangdanitem {
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-size: .875rem;
}

.avatar {
  color: #2E3033;
  font-weight: bold;
}

.bangdanitems {
  display: flex;
  align-items: center;
  margin-left: .9375rem;
  margin-top: .9375rem;
  justify-content: space-between;

}

.bangdanitemtitle {
  display: flex;
  width: 13.9375rem;
  padding: .75rem 1rem;
  height: 3.125rem;
  justify-content: space-between;
  border-radius: .5rem 0 0 .5rem;
  align-items: center;
  margin-left: .75rem;
  color: #2E3033;
  background: #F2F3F5;
  box-shadow: .0625rem .125rem .25rem 0rem rgba(0, 0, 0, 0.04);
}

.xiangqing {
  width: 3.75rem;
  height: 1.875rem;
  text-align: center;
  line-height: 1.875rem;
  border-radius: 4.25rem;
  border: .0625rem solid #2E3033;
  color: #2E3033;
  ;

}
/deep/.van-cell {
  position: static !important; /* 移除相对定位 */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
/deep/ .van-cell::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  /* border-bottom: 1px solid #ebedf0; */
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  border: none;
}

.active {
  font-weight: bold;
  color:#323233 ;
}
</style>